<template>
  <div class="bg-white dark:bg-zinc-900 xl:dark:bg-zinc-800 rounded pd-1">
    <div
      class="relative w-full rounded cursor-zoom-in group"
      @click="onToPinsClick"
    >
      <img
        class="w-full rounded bg-transparent"
        style="height: 280px"
        :src="`https://robohash.org/${data.id}`"
        ref="imgTarget"
        alt=""
      />
      <div
        class="hidden opacity-0 w-full h-full bg-zinc-900/50 absolute top-0 left-0 rounded duration-300 group-hover:opacity-100 xl:block"
      >
        <m-button class="absolute top-1.5 left-1.5">分享</m-button>
        <!-- 点赞按钮 -->
        <m-button
          class="absolute top-1.5 right-1.5"
          type="info"
          icon="heart"
          iconClass="fill-zinc-900 dark:fill-zinc-200"
        ></m-button>
        <!-- 下载按钮 -->
        <m-button
          class="absolute bottom-1.5 left-1.5 bg-zinc-100/70"
          type="info"
          size="small"
          icon="download"
          iconClass="fill-zinc-900 dark:fill-zinc-200"
          @click="onDownLoad"
        ></m-button>
        <!-- 全屏按钮 -->
        <m-button
          class="absolute bottom-1.5 right-1.5 bg-zinc-100/70"
          type="info"
          size="small"
          icon="full"
          iconClass="fill-zinc-900 dark:fill-zinc-200"
          @click="onImgFullScreen"
        ></m-button>
      </div>
    </div>
    <!-- 标题 -->
    <p class="text-sm mt-1 font-bold text-zinc-900 dark:text-zinc-300 px-1">
      {{ data.name }}
    </p>
    <!-- 作者 -->
    <div class="flex items-center mt-1 px-1">
      <img
        v-lazy
        class="h-2 w-2 rounded-full"
        src="https://robohash.org/1"
        alt=""
      />
      <span class="text-sm text-zinc-500 ml-1">{{ data.author }}</span>
    </div>
  </div>
</template>

<script setup>
import { useFullscreen } from '@vueuse/core'
import { saveAs } from 'file-saver'
import { message } from '../../../../libs/message'
import { ref, computed } from 'vue'
import { useElementBounding } from '@vueuse/core'

const props = defineProps({
  data: {
    type: Object,
    required: true
  }
})

const imgTarget = ref(null)

const {
  x: imgContainerX,
  y: imgContainerY,
  width: imgContainerWidth,
  height: imgContainerHeight
} = useElementBounding(imgTarget)

const imgContainerCenter = computed(() => {
  return {
    translateX: parseInt(imgContainerX.value + imgContainerWidth.value / 2),
    translateY: parseInt(imgContainerY.value + imgContainerHeight.value / 2)
  }
})

const onDownLoad = () => {
  message('success', '图片开始下载')
  setTimeout(() => {
    saveAs(`https://robohash.org/${props.data.id}`)
  }, 100)
}

const emits = defineEmits(['click'])

//全屏展示
const { enter: onImgFullScreen } = useFullscreen(imgTarget)

const onToPinsClick = () => {
  emits('click', { id: props.data.id, location: imgContainerCenter.value })
}
</script>

<style scoped></style>
